<template>
  <div class="printview-container" ref="printview">
    <div :width="previewData.width + 'mm'">
      <a-space style="margin-bottom: 10px">
        <!-- <div style="margin-right: 20px">打印预览</div> -->
        <a-button :loading="previewData.waitShowPrinter" type="primary" @click.stop="print">
          <template #icon><printer-outlined /></template>
          打印
        </a-button>
        <a-button type="primary" @click.stop="toPdf">
          <template #icon><download-outlined /></template>
          导出PDF
        </a-button>
      </a-space>
      <a-spin :spinning="previewData.spinning" style="min-height: 100px">
        <div id="preview_content_design" style="display: flex; justify-content: center"></div>
      </a-spin>
    </div>
  </div>
</template>
  
  <script setup>
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { useRoute } from 'vue-router'
import { PrinterOutlined, DownloadOutlined } from '@ant-design/icons-vue'
import { hiPrintPlugin, hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint-extend'
import panel from './design/panel'
import printData from './design/print-data'
import printFuns from './design/print-funs'
import Api from '@/api/request.js'
hiPrintPlugin.disAutoConnect() // 取消自动连接直接打印客户端
let hiprintTemplate
const route = useRoute()
const previewData = reactive({
  curPaper: {
    type: 'A4',
    width: 210,
    height: 296.6
  },
  visible: false,
  spinning: false,
  waitShowPrinter: false,
  width: 0, // 纸张宽 mm
  hiprintTemplate: {}, // 模板
  printData: {} // 数据
})
const initPrintTemplate = () => {
  //   console.log(panel)
  //   console.log(printData)
  //   $('#hiprint-printTemplate').empty() // 先清空, 避免重复构建
  //   hiprintTemplate = new hiprint.PrintTemplate({
  //     template: panel
  //   })
  //   show(hiprintTemplate, printData)
  //   return
  let FormKey = route.query.FormKey
  let OID = route.query.OID
  let PrintTemID = route.query.PrintTemID
  let CacheKey = route.query.CacheKey
  let url = 'WMS_PrintFunction'
  let params = JSON.stringify(['getPrintData', FormKey, OID, PrintTemID, CacheKey])
  Api.post(url, params)
    .then((res) => {
      if (res.error) {
        message.warning(res.error.error_info)
      } else {
        $('#hiprint-printTemplate').empty() // 先清空, 避免重复构建
        hiprintTemplate = new hiprint.PrintTemplate({
          template: res.data.Template
        })
        window.hiprint.hiprintExpData = res.data.hiprintExpData
        show(hiprintTemplate, res.data.printData)
      }
    })
    .catch((error) => {
      console.log(error)
      message.error(`请求异常`)
    })
}
const hideModal = () => {
  previewData.visible = false
}
const show = (hiprintTemplate, printData, width = '210') => {
  previewData.visible = true
  previewData.spinning = true
  previewData.width = hiprintTemplate.editingPanel ? hiprintTemplate.editingPanel.width : width
  // previewData.width = width
  previewData.hiprintTemplate = hiprintTemplate
  previewData.printData = printData
  setTimeout(() => {
    // eslint-disable-next-line no-undef
    $('#preview_content_design').html(hiprintTemplate.getHtml(printData))
    previewData.spinning = false
  }, 500)
}
const print = () => {
  previewData.waitShowPrinter = true
  previewData.hiprintTemplate.print(
    previewData.printData,
    {},
    {
      callback: () => {
        console.log('callback')
        previewData.waitShowPrinter = false
      }
    }
  )
}
const toPdf = () => {
  hiprintTemplate.toPdf(previewData.printData, '打印预览')
}
onMounted(() => {
  window.hiprintFuns = printFuns
  window.hiprint.query = route.query
  initPrintTemplate()
})
</script>
<style lang="scss" scoped>
</style>
<style>
.printview-container .hiprint-printPaper {
  border: 1px solid #000;
}
</style>